@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  background-color: $text-color;

  .options {
    position: fixed;
    padding: 4px 0;
    min-width: 200px;
    max-width: 400px;
    max-height: 252px;
    border-radius: $border-radius;
    background-color: $text-color;
    box-shadow: 0 4px 16px 0 rgba(39, 50, 71, 0.28);
    overflow-y: auto;
    z-index: 200;
  }
}

.item {
  position: relative;
  padding: 6px 8px;
  @include TypographySymbolText($white);
  cursor: pointer;

  &.isOpen,
  &:hover {
    background-color: $dark-color06;
  }

  &.hasChildren {
    :global {
      .icon {
        opacity: 1;
        @include vertical-center;
        right: 4px;
      }
    }
  }
}
